<template>
	<public-view navType="other" topBgShow="6" :isTabbar="false" tabbarType="2">
		<view class="content">
			<view class="live-video-list w-100 f-w-w flex j-c-b a-i-s" v-if="topTab === 0">
				<view class="w-100 flex j-c-b live-list f-w-w">
					<view class="item flex" @click="goTo({url:'/pages/live/index/openLive'})">
						<image class="bgimg" src="@/static/logo.png" mode=""></image>
						<!-- <view class="live-video-info-box">
							<view class="live-video-status f-s-20 color-fff">
								<text class="l-h-36" style="color: #ffB900;">直播中</text><text class="" style="color: rgba(255,255,255,0.4);margin: 0 12rpx;">|</text>人气值8826
							</view>
						</view> -->
						<view class="live-video-info-box">
							<view class="live-video-status f-s-20" style="color: rgba(255,255,255,0.7);">
								<text class="l-h-36">已结束</text><text class="" style="margin: 0 12rpx;">|</text>人气值8826
							</view>
							<view class="info-box">
								<view class="user-box flex a-i-c" style="color: rgba(255,255,255,0.7);">
									<image class="avatar" src="@/static/logo.png" mode=""></image>
									尤里urey
								</view>
								<view class="f-s-24 color-fff f-w-b w-100 l-h-32">
									尤里在分享AE特效制作过程
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="video-swiper" v-if="topTab === 1">
				<swiper :indicator-dots="false" :vertical="true" class="swiper" :circular="true" :autoplay="false" :interval="3000" :duration="100">
					<swiper-item style="position: relative;">
						<!-- <image src="@/static/logo.png" mode=""></image> -->
						<view class="" @click="pause" style="width: 100%;height: 100%;">
							<dom-video ref="domVideo" :autoplay="true" :loop="true" :controls="false"></dom-video>
						</view>
						<view class="share-like-comment-box">
							<view class="box-item flex f-d-c a-i-c color-fff f-s-24 l-h-30">
								<image class="icon" src="@/static/images/live/like-icon.svg" mode=""></image>
								1000
							</view>
							<view class="box-item flex f-d-c a-i-c color-fff f-s-24 l-h-30" @click="openPopup('commentPopup')">
								<image class="icon" src="@/static/images/live/common-icon.svg" mode=""></image>
								1000
							</view>
							<view class="box-item flex f-d-c a-i-c color-fff f-s-24 l-h-30" @click="openPopup('sharepopup')">
								<image class="icon" src="@/static/images/live/share-icon.svg" mode=""></image>
								1000
							</view>
						</view>
						<view class="video-user-info">
							<view class="user-info flex a-i-c color-fff f-s-28">
								<image class="avatar" src="../../../static/logo.png" mode=""></image>
								name
							</view>
							<view class="video-desc color-fff f-s-28 l-h-42">
								这是一款我超喜欢的滤镜，推荐给我呗！速求！
							</view>
							<view class="tags f-s-24 color-fff l-h-34">
								#7.2w人浏览过
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="" slot="popup">
		</view>
	</public-view>
	<uni-popup ref="sharepopup" type="bottom" mask-background-color="rgba(0,0,0,0)">
		<view class="share-content flex f-d-c a-i-c">
			<view class="title f-s-24 color-fff all-center">
				转发
			</view>
			<view class="w-100 flex a-i-c item-box">
				<view class="item color-fff f-s-24 flex f-d-c a-i-c">
					<image class="item-icon" src="@/static/images/weixinicon.svg" mode=""></image>
					微信
				</view>
				<view class="item color-fff f-s-24 flex f-d-c a-i-c">
					<image class="item-icon" src="@/static/live/friend-circle.svg" mode=""></image>
					朋友圈
				</view>
				<view class="item color-fff f-s-24 flex f-d-c a-i-c">
					<image class="item-icon" src="@/static/live/link-icon.svg" mode=""></image>
					链接
				</view>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="commentPopup" type="bottom" mask-background-color="rgba(0,0,0,0)" safe-area>
		<view class="comment-box flex f-d-c a-i-c" :class="show_more_comment?'height100':''">
			<view class="w-100 a-i-c flex color-fff f-s-24 j-c-b top-viewa" :style="{height,paddingTop}">
				<view class="">
					<image v-if="show_more_comment" @click="closePopup('commentPopup')" class="back-icon-comment" src="@/static/images/nav-back-white.svg" mode=""></image>
				</view>
				<view class="">
					评论（329条）
				</view>
				<view class="config-box" >
					<block v-if="!show_more_comment">
						<image class="open-big" src="@/static/live/open-big-icon.svg" mode="" @click="showMoreComment"></image>
						<image class="close-icon" src="@/static/live/close-icon-live.svg" mode="" @click="closePopup('commentPopup')"></image>
					</block>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-view-comment" :style="{height:'calc(100% - '+height+' - 132rpx)'}">
				<view class="comment-item-box flex f-d-c">
					<view class="item flex" v-for="(item, index) in 10" :key="index">
						<view class="avatar">
							<image class="image" src="@/static/logo.png" mode=""></image>
						</view>
						<view class="comment-info-text-box">
							<view class="user-name">
								阿三发
							</view>
							<view class="comment-text l-h-36 color-fff">
								哈哈哈哈哈
							</view>
							<view class="coment-time-address-box f-s-24 color-999 flex a-i-c l-h-36">
								1小时前<text class="dian"></text>河北<view class="reback-button color-fff">
									回复
								</view>
							</view>
							<view class="back-comment-box flex">
								<image class="avatar-back" src="@/static/logo.png" mode=""></image>
								<view class="user-name-back-box">
									<view class="user-name-box f-s-30 l-h-42">
										祝你好梦
									</view>
									<view class="color-fff f-s-26 l-h-42">
										禅眼界山芋，恶言伤人心！禅眼界山芋，恶言
									</view>
									<view class="coment-time-address-box f-s-24 color-999 flex a-i-c l-h-36">
										1小时前<text class="dian"></text>河北
									</view>
								</view>
							</view>
							<view class="open-more-comment color-999 f-s-24">
								—展开全部回复
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="user-send-msg">
				<view class="input-box flex j-c-b a-i-c">
					<input type="text" class="f-s-24 input-text" placeholder="说点什么吧～" placeholder-style="color:rgba(255,255,255,0.48)">
					<view class="send-btn f-s-26 color-fff all-center">
						发送
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import isDomVideo from "@/components/ls-dom-video/ls-dom-video.vue"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"dom-video":isDomVideo
		},
		data() {
			return {
				show_more_comment:false,
				isIphone:false,
				paddingTop:'',
				top_number:'',
				height:"",
				is_pause:false
			};
		},
		computed:{
			topTab(){
				return this.$store.state.live_tab
			}
		},
		onLoad() {
			this.iniPopup()
		},
		onHide() {
			console.log("app.hide")
			if(this.is_pause){
				console.log("app.hide1")
				this.$refs.domVideo.pause()
			}
		},
		methods:{
			goTo,
			pause(){
				if(this.is_pause){
					this.$refs.domVideo.pause()
				}else{
					this.$refs.domVideo.play()
				}
				this.is_pause = !this.is_pause
			},
			showMoreComment(){
				this.show_more_comment = true
			},
			iniPopup(){
				let sys = uni.getSystemInfoSync()
				this.isIphone = sys.model.indexOf("iPhone")<0?false:true
				this.paddingTop = sys.statusBarHeight+'px'
				this.top_number = sys.statusBarHeight+(this.isIphone?44:48)
				this.height = (sys.statusBarHeight+(this.isIphone?44:48))+'px'
			},
			closePopup(text){
				this.show_more_comment = false
				this.$refs[text].close()
			},
			openPopup(text){
				this.$refs[text].open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.live-video-list{
		height: 100vh;
		// position: fixed;
		// z-index: 3;
		// top: 0;
		// left: 0;
		background-color: #333333;
		padding: 30upx;
		.live-list{
			.item{
				border: 2upx solid #333333;
				width: 328upx;
				height: 328upx;
				border-radius: 12upx;
				margin-bottom: 32upx;
				position: relative;
				overflow: hidden;
				.live-video-info-box{
					position: absolute;
					z-index: 2;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					.info-box{
						width: 100%;
						position: absolute;
						bottom: 0;
						left: 0;
						padding: 14upx;
						background: rgba(0,0,0,0.6);
						border-radius: 0 0 12upx 12upx;
						.user-box{
							margin-bottom: 8upx;
							.avatar{
								width: 32upx;
								height: 32upx;
								margin-right: 8upx;
								border-radius: 50%;
							}
						}
					}
					.live-video-status{
						padding: 6upx 12upx;
						background: rgba(0,0,0,0.6);
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 12upx 0 12upx 0;
					}
				}
				.bgimg{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.user-send-msg{
		width: 100%;
		padding: 32upx;
		.input-box{
			width: 100%;
			background: rgba(255,255,255,0.3);
			padding-left: 28upx;
			border-radius: 36upx;
			.send-btn{
				width: 140upx;
				height: 72upx;
				background: linear-gradient(78.2deg, #FBB10B 0%, #FB3A0B 100%);
				border-radius: 36upx;
			}
			.input-text{
				width: calc(100% - 28upx - 140upx);
			}
		}
	}
	.scroll-view-comment{
		width: 100%;
		padding: 24upx;
		box-sizing: border-box;
		.comment-item-box{
			width: 100%;
			.item{
				width: 100%;
				padding-bottom: 20upx;
				margin-bottom: 20upx;
				border-bottom: 2upx solid rgba(255,255,255,0.25);
				.comment-info-text-box{
					width: 570upx;
					.back-comment-box{
						width: 600upx;
						margin-top: 8upx;
						.avatar-back{
							width: 40upx;
							height: 40upx;
							border-radius: 50%;
							margin-right: 16upx;
						}
						.user-name-back-box{
							.user-name-box{
								color: #AFB0B3;
								margin-bottom: 8upx;
							}
						}
					}
					.coment-time-address-box{
						.reback-button{
							margin-left: 16upx;
						}
						.dian{
							width: 6upx;
							height: 6upx;
							margin: 0 8upx;
							background: #999;
							border-radius: 50%;
						}
					}
					.comment-text{
						margin-bottom: 10upx;
					}
					.user-name{
						color: #AFB0B3;
						margin-bottom: 8upx;
					}
				}
				.avatar{
					width: 96upx;
					height: 96upx;
					margin-right: 28upx;
					border-radius: 50%;
					overflow: hidden;
					.image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.comment-box{
		width: 100%;
		position: relative;
		border-radius: 32upx 32upx 0 0;
		background: rgba(0,0,0,0.8);
		backdrop-filter: blur(20upx);
		height: 1080upx;
		transition: height .2s linear;
		.top-viewa{
			padding: 0 30upx;
			.back-icon-comment{
				width: 26upx;
				height: 26upx;
			}
			.config-box{
				.open-big{
					width: 28upx;
					height: 28upx;
					margin-right: 32upx;
				}
				.close-icon{
					width: 28upx;
					height: 28upx;
				}
			}
			.title{
				// height: 74upx;
			}
		}
		
	}
	.share-content{
		width: 750upx;
		background: rgba(0,0,0,0.8);
		height: 400upx;
		backdrop-filter: blur(20upx);
		.title{
			height: 74upx;
		}
		.item-box{
			padding: 24upx;
		}
		.item{
			margin-right: 62upx;
			.item-icon{
				width: 64upx;
				height: 64upx;
				margin-bottom: 16upx;
			}
		}
	}
	.video-user-info{
		position: absolute;
		bottom: 190upx;
		padding-left: 32upx;
		width: 434upx;
		.video-desc{
			width: 100%;
			margin-bottom: 16upx;
		}
		.user-info{
			margin-bottom: 24upx;
			.avatar{
				width: 64upx;
				height: 64upx;
				margin-right: 16upx;
				background: #ffffff;
				border-radius: 50%;
			}
			.name{
				
			}
		}
	}
	.share-like-comment-box{
		position: absolute;
		bottom: 180upx;
		right: 30upx;
		.box-item{
			margin-bottom: 50rpx;
			.icon{
				width: 64upx;
				height: 64upx;
				margin-bottom: 8upx;
			}
		}
	}
	.video-swiper{
		width: 750upx;
		height: 100vh;
		position: fixed;
		z-index: 3;
		top: 0;
		left: 0;
		background-color: #000;
		.swiper{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.video{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.height100{
		height: 100vh;
	}
	.content{
		width: 750upx;
		position: relative;
	}
</style>
